<template>
	<view>
		<u-modal :show="showAuthorizePhone" :show-title="false" :show-confirm-button="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<!-- <img class="avatar-img" src="" mode="widthFix"> -->
						<view></view>
					</view>
					<view class="content">申请获得您的手机号</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok"><u-button  :hair-line='false' :custom-style="customStyleUnOk"
							@click="showAuthorizePhone=false"> 拒绝</u-button></view>
					<view class="btn-ok"><u-button  type="success" :hair-line='false' :custom-style="customStyleOk"
							open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></view>
				</view>
			</view>
		</u-modal>
	</view>	
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'getOpenId'])
		},
		data() {
			return {
				showAuthorizePhone:false,
				src: "/static/unLoginAvater.png",
				// imageURL: "/static/0187c358fd6e72a8012160f71b0715.gif",
				phone: '',
				openId: '',
				wxInfo: {},
				agreementPhone: [],
				menushow: false,
			}
		},
		watch:{
			userInfo:{
				handler(newVal,oldVal){
					console.log('变化了')
					if(newVal.openid && ! oldVal.openid && this.openId){
						uni.$u.toast('登录成功')
						// setTimeout(()=> {
						// 	uni.navigateBack()
						// },1000)
					}
				}
			},
		},
		methods: {
			showModal() {
				let that = this
				uni.getUserProfile({
					desc: '获取您的用户信息',
					success(res) {
						console.log(res);
						console.log(res.userInfo,"打印userInfo")
						that.wxInfo = res.userInfo
						that.showAuthorizePhone = true
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			authPhone(e) {
				console.log(e);
				this.$req('POST', this.$api.getPhone, {
					code: e.detail.code
				}).then((res) => {
					console.log(res);
					this.phone = res.data.phoneNumber
					this.getLogin()
				})
				this.showAuthorizePhone = false
			},
			getLogin() {
				let that = this
				uni.login({
					success(res) {
						console.log(res);
						that.$req('POST', that.$api.getopenid, {
							code: res.code
						}).then((resp) => {
							console.log(resp,'打印resp');
							that.openId = resp.data.openid
							that.register()
						})
					}
				})
			},
			register() {
				this.$req('POST', this.$api.register, {
					openid: this.openId,
					nickname: this.wxInfo.nickName,
					head_img: this.wxInfo.avatarUrl,
					phone: this.phone,
				}).then((res) => {
					console.log(res, "end");
					this.$store.dispatch('auth/getInfo', res.data.id)
					// const id = uni.getStorageSync('shareId');
					// if(id){
					// 	setTimeout(() => {
					// 		this.setShare()
					// 	},2000)
					// }
				})
			},
			// //分享处理接口
			// setShare(){
			// 	const id = uni.getStorageSync('shareId');
			// 	this.$req('POST',this.$api.inviteMemberRegister,{
			// 		openid:this.getOpenId,
			// 		invite_memberid: id
			// 	}).then(res => {
			// 		// uni.$u.toast(res.mes)
			// 		if(res.code != 1){
			// 			return
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.auth-card {
		text-align: center;
	
		.avatar-img {
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 100%;
		}
	
		.title {
			font-size: 24rpx;
		}
	
		.content {
			margin-top: 10rpx;
		}
	}
	
	.auth-btncard {
		width: 500rpx;
		margin: 20rpx 0 0;
		display: flex;
		justify-content: space-between;
	
		.btn-unok {
			width: 50%;
			float: left;
		}
	
		.btn-ok {
			width: 50%;
			float: left;
			margin: 0;
			padding: 0;
			border: 0px solid transparent; //自定义边框
			outline: none; //消除默认点击蓝色边框效果
			u-button {
				margin: 0;
				padding: 0;
				border: 0px solid transparent; //自定义边框
				outline: none; //消除默认点击蓝色边框效果
			}
		}
	}
</style>
